import React from "react";
import PropTypes from "prop-types";
import {List, Grid} from "antd-mobile";


class AvatarSelector extends React.Component {
  static defaultProps = {
    selectAvatar: PropTypes.func.required
  };

  constructor () {
    super();
    this.state = {
      text: ""
    };
  }

  handleItemClick (item) {
    this.setState({text: item.text});
    this.props.selectAvatar(item.text);
  }

  render () {
    const imgStr = "boy,bull,chick,crab,girl,hedgehog,hippopotamus,koala,lemur,man,pig,tiger,whale,woman,zebra";
    const imgList = imgStr.split(",").map(n => {
      return {icon: require(`./img/${n}.png`), text: n};
    });
    const header = this.state.text ? `已选择:${this.state.text}` : "请选择头像:";
    return (
      <div>
        <List renderHeader={header}>
          <Grid data={imgList} onClick={item => this.handleItemClick(item)}/>
        </List>
      </div>
    );
  }
}

export default AvatarSelector;